Hello and welcome.
In this lecture we are going to create styling for our projet using C Ss.
To save time I already did.
The singer says styling are just run through them with you saw like one here.
We are using style in his dear male selector and the propertys we have a to it is the font family with
a value of sounds so if I'm going to add on other font because when creating fonts is always good idea
to have more than one just in case the computer view in this page.
Care as only got one font or hasn't got the other.
So I forgot the main font and then I'm able to substitute font so the first one is not available.
These second one will be used so most computers should have both or at least one of them noticed the
way the select also starts so when you stylin you always have to have a select top which is the item
he has selected.
So Line 1 here the hasty mail is the selector.
The actual hall heating element and then you have an opening curly braces and a closing.
Curly braces in between the colibri.
This is where you place the property which is on the left.
Then call on.
We separate the property from the value so the value is on the right.
The properties on the left you must separate each of the.
If your values are more than what you separate each one with a comma and then you end with a semicolon.
Very important.
The semicolon.
She missed that out.
It will not apply the styling.
So this is the format that will be used throughout the document body.
Again this is a body selector.
Again this is the stylin of applied to it.
We've given it a wave of 50 percent.
50 percent means 50 percent of the parent contain a key.
You can also use pixel values freedom on the use percentage.
The maximum weight set a maximum week and the body to 800 pixels.
A minimum of four hundred and eighty pixels.
And the marjane outset the margin to zero and then all to automate it centres it around the other values
line 12 is a class.
There's a class called Last Resort which was defined in the hastier mail.
These are live propertys and values then giving it a collage of white which you refer to the antrel
Text and then padding seven pixels padding and refers to the space inside siby element.
Go another class here online 19 called kesey's again carlaw white pad in seven pixels.
That is how you write a comment in C Ss if you don't want an item to be disc to be used or if you want
to test out things.
This is how you input it is great.
So the web browser will ignore that styling.
Okay then we've got a button on line 26.
The button is actually created using javascript to will create that button later using javascript but
this is a styling for the button.
Background colour are purple carlaw refers to a column inside the bottom the text column the width of
the button 250 pixels the height 50 peaks pixels border radios is what gives the camel lie a rounded
edge.
I've said it to twenty five pixels.
The font size refers for the size of the text inside the bottom.
That's like thirty three line Thirty bordeaux's tar means I don't want any shadows around the borders
line.
35 is a margin from the top which means one 30 pig source to drop from the top.
We want to create a space teti pixels from that top line tip to seven margin left means we are moving
50 pixels from the left in the other direction.
K that's what that does so let's call.
We are now on line 39.
We got an idea there called submit that would be the submit button.
So the values are assigned to these sub made Heidi button on line 39 we've got bad Grunk carlaw.
I've said that to yellow.
We've got to call all of use hex values there 0 0 remains black.
They would say that with the height by the radio font size border style margin and margin top margin
left not going to good true leave margin because I've already explained that in our previous stylin.
On the other on on this I have already explained it here so I'm not going to run through that again.
Is the same thing in a way.
Where are we now.
Guess what I got an idea here.
Guess field.
So again the properties are similar to the properties we've used before and border here.
Just supply the border.
Maybe fig 5 pixels a fake solar panel is the one I wanted border to be unified.
That is there's no breaks in between.
And this is a Bodog call the kolok the border texta line will place any text on centre.
Again this this is called guess.
These are the properties of a sign to a property is what we've already explained.
Again guess that a class called guess is again background colour property.
We've got the main rup online 24/7.
Again these are familiar properties.
I've already explained why God hates one element which is ahead in time.
Wish Chris the title for our game.
Again these are the properties again familiar properties.
We've already explained background or padding padding refers to this space inside and then go.
And so on.
Okay the 650 pixels paragraph tag could give an A font size of 20 pixels text a line to the centre.
So basically that's your list darlin.
There's any part of this csx you can understand please to let me know that a lot of the propertys values
are repeat values and properties.
All right so I just say that and we can see what our looks like.
Okay so this is what the game looks like at the moment.
Okay will be styling.
So there's no functionality at the moment.
You can't do enough in under my own because javascript has not been applied.
So once we play you.
A script then the game will be ready to go.
So they're set for this lecture on the sets.
Thanks for watching.
Bye for now.